import React, { Component } from 'react';
import { Layout, Menu, Icon } from 'antd';
import { Link } from 'react-router-dom';

const { Sider } = Layout;

export default class SiderCustom extends Component {
    constructor(props) {
        super(props);
        const { collapsed } = props;
        this.state = {
            collapsed: collapsed,
            firstHide: true, //第一次先隐藏暴露的子菜单
            selectedKey: '', //选择的路径
            openKey: '', //打开的路径（选择的上一层）
        }
    }
    componentDidMount() {
        this.setMenuOpen(this.props);
    }
    componentWillReceiveProps(nextProps) {
        this.onCollapse(nextProps.collapsed);
        this.setMenuOpen(nextProps);
    }
    setMenuOpen = props => {
        const { path } = props;
        this.setState({
            openKey: path.substr(0, path.lastIndexOf('/')),
            selectedKey: path
        });
    };
    onCollapse = (collapsed) => {
        this.setState({
            collapsed,
            firstHide: collapsed,
        });
    };
    menuClick = e => {
        this.setState({
            selectedKey: e.key
        });
    };
    openMenu = v => {
        this.setState({
            openKey: v[v.length - 1],
            firstHide: false,
        })
    };
    setSelectedKey = () => {
        this.setState({ selectedKey: '/app' })
    }
    render() {
        const { collapsed, firstHide, openKey, selectedKey } = this.state;
        if (selectedKey.indexOf('/app/userOrders') !== -1) {
            this.setSelectedKey()     
        }
        return (
            <Sider
                trigger={null}
                collapsed={collapsed}
            >
                <div className="logo" style={collapsed ? { backgroundSize: '70%' } : { backgroundSize: '30%' }} />
                <Menu
                    theme="dark"
                    mode="inline"
                    selectedKeys={[selectedKey]}
                    onClick={this.menuClick}
                    onOpenChange={this.openMenu}
                    openKeys={firstHide ? null : [openKey]}
                >
                    {/* 管理员的侧边栏 */}
                    {this.props.username === 'admin' || this.props.username === 'admin_1' ?
                        <Menu.Item key={"/app"}>
                            <Link to={"/app"}><Icon type="home" /><span>首页</span></Link>
                        </Menu.Item> : ''}
                    {this.props.username === 'admin' || this.props.username === 'admin_1' ?
                        <Menu.Item key={"/app/form"}>
                            <Link to={"/app/form"}><Icon type="table" /><span>订单管理</span></Link>
                        </Menu.Item> : ''}
                    {this.props.username === 'admin' || this.props.username === 'admin_1' ?
                        <Menu.Item key={"/app/dataManagement"}>
                            <Link to={"/app/dataManagement"}><Icon type="folder" /><span>资料管理</span></Link>
                        </Menu.Item> : ''}
                    {this.props.username === 'admin' || this.props.username === 'admin_1' ?
                        <Menu.Item key={"/app/notification"}>
                            <Link to={"/app/notification"}><Icon type="notification" /><span>通知管理</span></Link>
                        </Menu.Item> : ''}
                    {this.props.username === 'admin' || this.props.username === 'admin_1' ?
                        <Menu.Item key={"/app/memorandum"}>
                            <Link to={"/app/memorandum"}><Icon type="file-text" /><span>备忘录</span></Link>
                        </Menu.Item> : ''}
                    {this.props.username === 'admin' || this.props.username === 'admin_1' ?
                        <Menu.Item key={"/app/sumBill"}>
                            <Link to={"/app/sumBill"}><Icon type="account-book" /><span>总帐单统计</span></Link>
                        </Menu.Item> : ''}

                    {/* 用户的侧边栏 */}
                    {this.props.username === 'admin' || this.props.username === 'admin_1' ? '' :
                        <Menu.Item key={"/app/order"}>
                            <Link to={"/app/order"}><Icon type="table" /><span>订单管理</span></Link>
                        </Menu.Item>}
                </Menu>
            </Sider>
        )
    }
}